<template>
 <div class="manbox">
    <el-dialog :visible.sync="dialogComp.show" height="300px" width="40%" class="dialog"  >
    <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
  </el-dialog>
 </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import browse from "@/api/logManage/browse";

export default {
  name: "rankingToptwenty",

  data() {
    return {
      // type: 2,
      xlist: [],
      ylist: [],

      dialogComp: {
        show: false
      }
    };
  },
  methods: {
    open() {
      this.dialogComp.show = true;
     setTimeout(() => {
        this.getData();
     },20)
    },
    getData() {
      this.xlist = [];
      this.ylist = [];
      browse.getBrowseFootPrint().then(res => {
        console.log(res);

        res.data.list.forEach(item => {
          this.xlist.push(item.goodsName);
          this.ylist.push(item.browseMarkCount);
        });
        this.drawLine(this.xlist, this.ylist);
        
      });
    },
    drawLine(xList, yList) {
      let myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title: { text: "浏览足迹排行前二十" },
        tooltip: {},
        xAxis: {
          data: xList,
           axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        yAxis: {
        },
        grid: {
          bottom:'30%'
        },
        series: [
          {
            name: "浏览次数",
            type: "bar",
            data: yList
          }
        ]
      });
    }
  }
};
</script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
<style scoped>
.manbox /deep/ .el-dialog {
  margin-top: 0vh !important;
}

.dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

